<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      v-model="form"
      :data="data"
      :page.sync="page"
      ref="crud"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button type="warning" size="small" icon="el-icon-download" v-if="permission.repairInquiry_export" @click="$refs.exportComp.visible = true">导出</el-button>
      </template>
      <template slot="menu" slot-scope="{ row }">
        <el-button icon="el-icon-view" size="small" type="text" v-if="permission.repairInquiry_view" @click="handleView(row)">详情 </el-button>
      </template>
    </avue-crud>
    <el-dialog
      v-dragDirectives
      class="custom-dialog"
      ref="dialog"
      title="详情"
      v-if="detailDialog.show"
      fullscreen
      append-to-body
      :visible.sync="detailDialog.show"
      :close-on-click-modal="false"
      top="5vh"
      width="70%"
      @close="closeDialog"
    >
      <avue-form :option="detailDialog.formOption" v-model="detailDialog.form" class="custom-form">
        <!--          <template slot="table1">-->
        <!--            <avue-crud ref="table1" :option="table1Option" :data="dataDetail.repairOriginalPartMasterInfos || []"></avue-crud>-->
        <!--          </template>-->
        <template slot="table1">
          <template v-if="['WAIT_OUT', 'FINISHED'].includes(detailDialog.form.currentStatus)">
            <span>原材料换料</span>
            <avue-crud ref="reloadCrud" :option="tableOption" :data="detailDialog.form.materialRefuelingVOList || []"></avue-crud>
            <span>子件换料 </span>
            <avue-crud ref="sonMaterialCrud" :option="table1Option" :data="detailDialog.form.componentRefuelingVOList || []"></avue-crud>
            <!-- <span>维修位号原物料信息 </span>
            <avue-crud ref="sonMaterialCrud" :option="table2Option" :data="detailDialog.form.mroRefuelingComponentList || []"></avue-crud> -->
          </template>
          <div v-else></div>
        </template>
        <template slot="attachments">
          <label>维修图片: </label>
          <div class="img-container">
            <img
              class="img-box"
              v-if="detailDialog.form.attachmentVOList && detailDialog.form.attachmentVOList.length"
              v-for="(d, index) of detailDialog.form.attachmentVOList || []"
              :key="index"
              :src="d.link"
              @click="openPreview(index, d.link)"
            />
            <div v-else></div>
          </div>
        </template>
      </avue-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="detailDialog.show = false"><i class="el-icon-circle-close"></i><span>取 消</span></el-button>
      </div>
    </el-dialog>
    <export-comp ref="exportComp" page-api-url="mes-product/mro-repair-out/repair-record-page" :option="option" :page="page" :query="query" file-name="维修查询"> </export-comp>
  </basic-container>
</template>
<script>
import { mapGetters } from 'vuex';
import { getList, getDetail } from '@/api/repair/repairInquiry';
import { detailOption, table1Option, tableOption, table2Option, exportOption } from '@/views/repair/repairInquiry';
import exportComp from '@/components/export-comp';

export default {
  name: 'repairInquiry',
  components: {
    exportComp
  },
  data() {
    return {
      table1Option,
      tableOption,
      table2Option,
      detailOption,
      exportOption,
      detailDialog: {
        show: false,
        form: {},
        formOption: {}
      },
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      data: [],
      option: {
        calcHeight: 30,
        height: 'calc(100vh - 420px)',
        tip: false,
        searchLabelWidth: 120,
        searchShow: true,
        searchMenuSpan: 10,
        searchMenuPosition: 'right',
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        indexLabel: '序号',
        columnBtn: false,
        column: [
          {
            label: '工单号',
            prop: 'workOrderNo',
            search: true
          },
          {
            label: '产品序列号',
            prop: 'productSn',
            search: true
          },
          {
            label: '产品编码',
            prop: 'productPartNo',
            search: true
          },
          {
            label: '产品名称',
            prop: 'productPartName'
          },
          {
            label: '产品型号',
            prop: 'productPartModel',
            search: true
          },
          {
            label: '当前状态',
            prop: 'currentStatus',
            type: 'select',
            search: true,
            dicData: [
              { label: '已报废', value: 'SCRAP' },
              { label: '维修完成', value: 'FINISHED' },
              { label: '待出维修', value: 'WAIT_OUT' },
              { label: '待维修', value: 'WAIT_REPAIR' }
            ]
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            search: true,
            searchSpan: 8,
            searchType: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
            // formatter: (val) => {
            //   return val.updateTime;
            // }
          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$structuralSplit();
    });
  },
  computed: {
    ...mapGetters(['permission'])
  },
  methods: {
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      if (params.updateTime && params.updateTime.length) {
        params.startTime = params.updateTime[0];
        params.endTime = params.updateTime[1];
        delete params.updateTime;
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    async onLoad(page, params = {}) {
      this.loading = true;
      try {
        const res = await getList(page.currentPage, page.pageSize, Object.assign(params, this.query));
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records || [];
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
    },
    async handleView(row) {
      this.detailDialog.formOption = this._cloneDeep(detailOption);
      const group = this._cloneDeep(detailOption.group);
      try {
        if (['SCRAP', 'FINISHED'].includes(row.currentStatus)) {
          this.$set(this.detailDialog.formOption, 'group', group);
        } else if (row.currentStatus === 'WAIT_REPAIR') {
          // option 只保留基础信息  不良信息
          const updateGroup = group.slice(0, 2);
          this.$set(this.detailDialog.formOption, 'group', updateGroup);
        } else {
          const updateGroup = group.slice(0, 4);
          this.$set(this.detailDialog.formOption, 'group', updateGroup);
        }
        const res = await getDetail(row.repairConfirmId);
        if (!res.data.data.attachmentVOList) {
          res.data.data.attachmentVOList = [];
        }
        this.detailDialog.form = Object.assign({}, res.data.data, row);
        this.$set(this.detailDialog.form, 'badPhenomenonName', res.data.data.badPhenomenonName);
        this.$set(this.detailDialog.form, 'lineName', res.data.data.lineName);
        this.$set(this.detailDialog.form, 'routeName', res.data.data.routeName);
        this.$set(this.detailDialog.form, 'stationName', res.data.data.stationName);
      } catch (e) {}
      this.detailDialog.show = true;
    },
    closeDialog() {
      this.detailDialog.show = false;
      this.detailDialog.form = {};
    },
    openPreview(index = 0, link) {
      this.$ImagePreview([{ url: link }], index, {
        closeOnClickModal: true
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.custom-form {
  height: calc(100vh - 180px);
  overflow-y: scroll;
  ::v-deep .avue-crud__menu {
    display: none;
  }
  span {
    font-weight: bolder;
  }
}

.custom-dialog {
}
.img-container {
  display: flex;
  flex-direction: row;
  height: 100px;
  width: 100px;
  margin-right: 10px;
}
</style>
